<template>
  <div class="html">
    <setting-header :num="num"></setting-header>
    <!--中间的内容部分-->
    <div class="setting-body">
      <form>
        <div class="form">
          <!--内容的左边部分-->
          <div class="setting-bodyLeft floatLeft">
            <!--填写信息的不同内容块-->
            <!--姓名部分-->
            <div class="name">
              <span class="title block">Name</span>
              <input type="text" placeholder="Sun He"/>
              <span class="text block">Heads up:Once you launch a project,you cannot make changes to your name on Kickstarter.</span>
            </div>
            <!--图片部分-->
            <div class="picture">
              <span class="title block">Picture</span>
              <span class="messeage block">Choose an image from your computer</span>
              <span class="text block">JPEG,PNG,GIF,orBMP.50MB file limit</span>
            </div>
            <!--Biography部分-->
            <div class="biography">
              <span class="title block">Biography</span>
              <input type="text"/>
              <span class="text block">We suggest a short bio.If it’s 300 charactersor less it’ll look great on your profile.</span>
            </div>
          </div>
          <!--内容的右边部分-->
          <div class="setting-bodyRight floatLeft">
            <!--填写信息的不同内容块-->
            <!--地址部分-->
            <div class="location">
              <span class="title block">Location</span>
              <input type="text" class="messeage block" placeholder="E.g.Brooklyn,NY"/>
            </div>
            <!--时间部分-->
            <div class="time">
              <span class="title block">Time zone</span>
              <el-button >
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <span class="text block">Most time zones are automatically adjusted for you. We’ll use this </span>
            </div>
            <!--路径部分-->
            <div class="url">
              <span class="title block">Vanity URL</span>
              <span class="example block">https://www.kickstarter.com/profile/</span>
              <input type="text" class="messeage"/>
              <span class="text block">For example, if you’d like your URL to be<br/>www.kickstarter.com/profile/polarbear,just type polarbear!Choose wisely though,once you set your vanity URL,it can’t be rest.</span>
            </div>
            <!--按钮部分-->
            <div class="button">
              <span class="title block">Websites</span>
              <input type="text"/><button>Add</button>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <!--保存信息-->
        <div class="save">
          <input type="submit" value="Save settings"/>
          <span class="block">View profile</span>
        </div>
      </form>
    </div>
    <setting-footer></setting-footer>
  </div>
</template>

<script>
  import settingHeader from '../public/SettingHeader'
  import settingFooter from '../public/SettingFooter'

    export default {
        name: "setting",
        components:{ settingHeader, settingFooter },
        data(){
            return{
              num:1,
            }
        }
    }
</script>

<style scoped lang="scss">
  /*公共样式*/
  .clear{clear: both;}
  input{outline: none}
  a{text-decoration: none}
  .block{display: block}
  .linkBlock{display: inline-block}
  .floatLeft{float: left}
  input::-webkit-input-placeholder{
    color: #757575;
  }
  /*中间部的内容部分*/
  .setting-body{
    height: 688px;
    background: #FFFFFF;
    box-shadow: 0 1px 0 0 #DDDDDD;
    overflow: hidden;
    margin-top: 34px;
    box-shadow: 0 2px 0 0 #DDDDDD;
  }
  /*表单*/
  .form{
    margin: 0px 0 0 200px;
    width: 1040px;
    border-bottom: 2px solid #F1EEEB;
  }
  input{border: none;}
  /*内容的左边部分*/
  .setting-bodyLeft{
    width: 408px;
    margin: 0 132px 0 0px;
  }
  /*内容部分的公共样式*/
  .title{
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #2E2E2E;
    margin-bottom: 7px;
  }
  .text{
    width: 408px;
    height: 40px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #2E2E2E;
    margin-bottom: 28px;
  }
  /*姓名部分*/
  .name{
    input{
      width:408px;
      height:43px;
      padding-left:13px;
      box-sizing: border-box;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      border: 1px solid #DDDEDD;
    }
    .text{margin-bottom: 29px;}
  }
    /*图片部分*/
  .picture{
    .title{margin-top:28px;}
    .messeage{
      line-height: 80px;
      height: 80px;
      border: 1px dashed #2C59F6;
      border-radius: 6px;
      text-align: center;
      font-family: PingFangSC-Medium;
      font-size: 12px;
      color: #2C59F6;
    }
  }
  /*biography部分*/
  .biography .name{margin-top: 29px;}
  .biography input{
    height: 80px;
    width: 408px;
    border: 1px solid #DDDEDD;
    font-size: 14px;
  }
  /*右边部分信息*/
  .setting-bodyRight {
    font-family: PingFangSC-Semibold;
    /*地址部分*/
    .location {
      margin-bottom: 27px;
      .messeage {
        width: 498px;
        height: 43px;
        padding-left: 32px;
        box-sizing: border-box;
        ont-family: PingFangSC-Regular;

        border: 1px solid #DDDEDD;
        font-size: 14px;
      }
    }
    .el-button {
      width: 493px;
      margin-bottom: 5px;
    }
    .el-icon-arrow-down {float: right;}
    /*路径部分*/
    .url {
      margin-top: 29px;
      font-size: 14px;
      .example {
        margin: 6px 0 1px 0;
        color: #2E2E2E;
      }
      .messeage {
        width: 498px;
        height: 43px;
        border: 1px solid #DDDEDD;
        font-size: 14px;
      }
      .text {
        line-height: 20px;
        height: 60px;
        width: 496px;
      }
    }
    /*按钮部分*/
  .button{
    input {
      width: 212px;
      height: 43px;
      border: 1px solid #DDDEDD;
      margin: 7px 3px 0 0;
      font-size: 14px;
    }
    button {
      width: 69px;
      height: 38px;
      background-color: #2c59f6;
      color: #FFFFFF;
      outline: none;
      border: none;
      margin-bottom: 38px;
    }
  }
}
  /*保存信息*/
  .save{
    margin:20px 0 0px 200px;
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    input{
      width:131px;
      height: 38px;
      background: #2C59F6;
      color: #FFFFFF;
    }
    span{
      margin: 8px 0 0  25px;
      color: #2E2E2E;
      display: inline-block;
    }
  }
</style>
